<template>
    <div class="box">
        <div>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>单价</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in showList" :key="item.id">
                    <td>{{ item.bookName }}</td>
                    <td>{{ item.writer }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.status ? "可借" : "已借出" }}</td>
                    <td>
                        <button @click="toggleStatus(item)">
                            {{ item.status ? "借阅" : "还" }}
                        </button>
                    </td>
                </tr>
            </tbody>
            <div>图书馆当前状态已借出{{ isLendNum }}本书/还剩{{ noLend }}本书</div>
            <tfoot>
                <tr>
                    <td>
                        <button @click="changeBtn('全部')" :class="{ active: btnStatus == '全部' }">
                            全部
                        </button>
                    </td>
                    <td>
                        <button @click="changeBtn('1')" :class="{ active: btnStatus == '1' }">
                            已借出
                        </button>
                    </td>
                    <td>
                        <button @click="changeBtn('2')" :class="{ active: btnStatus == '2' }">
                            可借
                        </button>
                    </td>
                </tr>
            </tfoot>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    bookName: "西游记",
                    price: 66,
                    writer: "吴承恩",
                    id: 0,
                    status: false,
                },
                {
                    bookName: "水浒传",
                    price: 77,
                    writer: "施耐庵",
                    id: 1,
                    status: true,
                },
                {
                    bookName: "红楼梦",
                    price: 88,
                    writer: "曹雪芹",
                    id: 2,
                    status: true,
                },
                {
                    bookName: "三国演义",
                    price: 99,
                    writer: "罗贯中",
                    id: 3,
                    status: true,
                },
            ],
            btnStatus: "全部",
        };
    },
    methods: {
        toggleStatus(item) {
            if (item.status == true) {
                // console.log(this.list);

                item.status = false;
            } else if (item.status == false) {
                // console.log(222);
                item.status = true;
            }
        },
        changeBtn(n) {
            this.btnStatus = n;
        },
    },
    computed: {
        isLendNum() {
            return this.list.filter((item) => !item.status).length;
        },
        noLend() {
            return this.list.length - this.list.filter((item) => !item.status).length;
        },
        showList() {
            switch (this.btnStatus) {
                case "1":
                    return this.list.filter((item) => item.status === false);
                case "2":
                    return this.list.filter((item) => item.status === true);
                default:
                    return this.list;
            }
        },
    },
};
</script>

<style scoped>
.box {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.active {
    background-color: pink;
    border: none;
}
</style>